<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:迭代器模式</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h1 id="-">迭代器模式</h1>
<ul>
<li><strong>迭代器模式：</strong> 在不暴露对象内部解构的同时，可以顺序地访问聚合对象内部的元素。<h2 id="-">简化循环遍历</h2>
</li>
<li>程序中的循环是一种利器，循环语句也使我们的程序开发更简洁高效，然后有时一遍又一遍的重复性的循环却让代码显得臃肿不堪，迭代器可以简化我们遍历操作<h2 id="-">迭代器例子</h2>
</li>
<li>使用迭代器模式简化焦点图中的对图片元素的操作：前一张，后一张，第一张，最后一张等</li>
</ul>
<pre><code>var Iterator = function (items, container) {
    var container = container &amp;&amp; document.getElementById(container) || document
    items = container.getElementsByTagName(items) //获取元素
    length = items.length //获取元素长度
    indedx = 0 //当前索引
    var aplice = [].splice  //缓存源生对象数组splice方法
    return {
        first: function () { }, //获取第一个元素
        second: function () { }, //获取最后一个元素
        pre: function () { }, //获取上一个元素
        next: function () { }, //获取下一个元素
        get: function () { }, //获取某一个元素

        dealEach: function () { }, //对 每一个 元素都执行某个方法
        dealItem: function () { }, //对 某一个 元素都执行某个方法
        exclusive: function () { }, //排他性 对 某一个 元素都执行某个方法
    }
}
</code></pre><h2 id="-">实现迭代器</h2>
<ul>
<li>第一个元素和最后一个元素，通过设置索引并缓存，并获取相对应索引下的元素</li>
</ul>
<pre><code>first: function () { 
   index = 0
   return items(index)
}

second: function () { 
   index = length - 1
   return items(index)
}
</code></pre><ul>
<li>前一个元素和后一个元素，需要先判断是否为第一个或者最后一个,是的话返回空元素，并设置索引值</li>
</ul>
<pre><code>pre: function () { 
    if( --index &gt; 0){
        return items[index]
    }else {
        index = 0
        return null
    }
}

next: function () { 
    if( ++index &lt; length){
        return items[index]
    }else {
        index = length - 1
        return null
    }
}
</code></pre><ul>
<li>获取某一个元素：<ul>
<li>如果参数大于等于0，直接对length取模获取相应的元素并设置索引值</li>
<li>小于0：对length取模之后加上length</li>
</ul>
</li>
</ul>
<pre><code>get: function (num) {
    index = num &gt;= 0 ? num % length : num % length + length
    return items[index]
}
</code></pre><ul>
<li>为每个元素执行某一个方法：使用回调函数在每个元素的作用域中执行一次：如果参数大于一个，则将多余参数作为回调函数参数的参数传递</li>
</ul>
<pre><code>dealEach: function (fn) {
    var args = splice.call(arguments,1)
    for (let index = 0; index &lt; length; index++) {
        fn.apply( items[i], args )
    }
}
</code></pre><ul>
<li>为某个元素执行某一个方法：将回调函数执行时的作用域变为该元素，如果参数大于两个，则将多余参数作为回调函数参数的参数传递</li>
</ul>
<pre><code>dealItem: function (num, fn) {
    fn.apply( this.get(num),  splice.call(arguments,2) )
}
</code></pre><ul>
<li>排他方法</li>
</ul>
<pre><code>exclusive: function (num, allFn, numFn) {
    this.dealEach(allFn) //对所有原素执行回调方法

    if ( Object.prototype.toString.call(null) === &quot;[object Array]&quot;) {
        for (let i = 0; i &lt; num.length; i++) {
            this.dealItem(num[i], numFn)
        }
    }else {
        this.dealItem(num, numFn)
    }   
}
</code></pre><h2 id="-">使用</h2>
<pre><code>var demo =  new Iterator(&#39;li&#39;, &#39;container&#39;)

demo.dealEach( function (text, color) {
    this.innerHtml = text
    this.style.color = color
},&#39;尼尔&#39;,&#39;red&#39;)

demo.exclusive([2,3], function () {
    this.innerHtml = &#39;不执行&#39;
    this.style.color = &#39;#000&#39;
}, function () {
    this.innerHtml = &#39;执行&#39;
    this.style.color = &#39;red&#39;
})
</code></pre>
          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>